<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "@/utils/http";
import CommentList from "@/components/CommentList.vue";
import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore = useNightModeStore();
const route = useRoute();
const router = useRouter();
const comments = reactive({ comments: [], commentsnum: null });
http.get(`/story/${route.params.storyid}/short-comments`)
    .then((re) => {
        console.log("评论", re);
        comments.comments = re.data.comments;
    });
http.get(`/story/${route.params.storyid}/extra`).then(re => {
    // console.log("===>",re);
    comments.commentsnum = re.data;
    console.log("结果==>", comments)
});
const isShowReply = ref(false);
const reactReply = (event) => {
    isShowReply.value = true;
    // console.log("父组件用来处理子组件事件的函数",event)
}

</script>

<template>
    <div :class="['all',nightModeStore.isNight ? 'night' : '']">
    <div :class="['commentBar', nightModeStore.isNight ? 'night' : '']" v-if="comments.commentsnum">
        <i class="back" @click="router.back()"></i>{{ comments.commentsnum.comments }}条评论
    </div>
    <div :class="['short-comment', nightModeStore.isNight ? 'night' : '']" v-if="comments.commentsnum">{{
        comments.commentsnum.short_comments }}条短评</div>
    <CommentList @show-reply="reactReply" :list="comments.comments"></CommentList>
    <div class="reply" :style="{ display: isShowReply ? 'flex' : 'none' }">
        <img class="avatar" src="../assets/morentouxiang.png"></img>
        <input type="text" placeholder="说说你的看法">
        <button class="send-btn">发送</button>
    </div>
    </div>
</template>

<style scoped>
.all.night{
    height: 100vh;
    background-color: #555;
}
.commentBar {
    width: 100%;
    line-height: 50px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    position: relative;
}

.commentBar i {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../assets/fanhui.png) no-repeat center center;
    background-size: 20px 20px;
}

.commentBar .left {
    background-color: #555;
    color: #fff;
}

.commentBar .left {
    color: #000;
}

.commentBar.night {
    background-color: #555;
    color: #fff;
}

.short-comment {
    padding: 20px;
    font-size: 13px;
}

.short-comment .left {
    background-color: #555;
    color: #fff;
}

.short-comment .left {
    color: #000;
}

.short-comment.night {
    background-color: #555;
    color: #fff;
}

.reply {
    width: 100%;
    height: 50px;
    background-color: #ddd;
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
   
}

.reply .avatar {
    width: 20px;
    height: 20px;
}

.reply input {
    height: 30px;
    background-color: transparent;
    border: none;
    outline: none;
    margin-left: 5px;
}
.reply .send-btn {
    background-color: #4580a0;
    color: white;
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 4px;
}

.reply .send-btn:hover {
    background-color: #4580a0;
}
</style>
